<template>
    <div class="phone-root">
        <p class="nopsw">无密码快捷登录</p>
        <div class="input">
            <input type="text" placeholder="国家和地区">
            <span>中国&ensp;<span class="fa fa-chevron-right"></span></span>
        </div>
        <div class="input">
            <div class="num">+86</div>    
            <input type="text" style="width:54vw" placeholder="请填写手机号码" v-model="tel">
        </div>
        <div class="input">
            <input type="text" placeholder="输入登录密码，至少6位" v-model="psw">
        </div>

        <button @touchstart="loginClick">立即登录</button>

        <Alert v-show="isAlert">{{alertContent}}</Alert>
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
    data:function(){
        return {
            tel:'',
            psw:'',
            alertContent:''
        }
    },
    computed:{
        ...mapState([
            "isAlert",
        ])
    },
    created:function(){
        this.$store.commit("setIsLoading",false);
    },
    methods:{
        loginClick:function(){
            var params = {
                tel:this.tel,
                psw:this.psw
            }
            this.$store.dispatch("requestLogin",params)
            .then(res=>{
                this.alertContent = res.data.msg;
                this.$store.commit("setIsAlert",true);
                setTimeout(()=> {
                    this.$store.commit("setIsAlert",false);
                    if(res.data.err==0){
                        this.$store.commit("setIsLogin",true);
                        var userInfo =JSON.stringify(res.data.userInfo);
                        localStorage.setItem("userInfo",userInfo);
                        location.href = "#/hunter";
                    }
                }, 1800);
                
            });
        }
    }
}
</script>

<style scoped>
.phone-root{
    width: 100vw;
    height: 100vh;
    background-color: #4abdcc;
    padding: 3.5vw 7vw;
    color: #fff;
}
.nopsw{
    font-size: 0.81rem;
    opacity: .8;
    text-align: right;
    margin-bottom: 4vw;
}
.input{
    width: 78vw;
    padding-left: 3vw;
    margin: 0 auto;
    height: 10vw;
    margin-top: 7vw;
    border-bottom: 1px solid #fff;
}
.input input{
    width: 58vw;
    border: none;
    background-color: transparent;
    color: #fff;
    padding-left: 1vw;
    font-size: 0.98rem;
}
.num{
    display: inline-block;
    padding-right: 4vw;
    border-right: 1px solid #fff;
}
.input:nth-of-type(1){
    margin-top: 12vw;
}
.input:nth-of-type(4){
    width: 30vw;
    margin-left: 4vw;
}
button{
    display: block;
    border: none;
    background-color: transparent;
    border: 1px solid #fff;
    width: 42vw;
    margin: 0 auto;
    height: 7.5vh;
    margin-top: 8vh;
    border-radius: 33px;
    color: #fff;
    font-size: 1.1rem;
}
</style>